---
title: Style guide
banner:
  text: 'This is a banner with an action'
  action_href: '/handbook/style-guide'
  action: 'Got it'
  type: 'info'
---

{% extends 'layouts/base.njk' %}

{% block content %}
<article class="stack wrapper type">
  <div class="stack flow-space-300">
    <h1 class="type--var-large">Variable Headline Large</h1>
    <h1 class="type--var-small">Variable Headline Small</h1>
    <h1 class="type--h1">Headline 1</h1>
    <h2 class="type--h2">Headline 2</h2>
    <h3 class="type--h3">Headline 3</h3>
    <h4 class="type--h4">Headline 4</h4>
    <h5 class="type--h5">Headline 5</h5>
    <h6 class="type--h6">Headline 6</h6>
    <p class="type--cta">CTA / Header link</p>
    <p class="type--eyebrow">Eyebrow</p>
    <p class="type--large">Body Large</p>
    <p class="type">Body</p>
    <p class="type--small">Body Small</p>
    <p class="type--caption">Caption</p>
    <p class="type--xsmall">Small Text</p>
  </div>

  {% Aside %}
  Lorem ipsum dolor sit amet consectetur adipisicing elit. In, culpa quas
  ratione quidem inventore id.
  {% endAside %}

  {% Aside 'caution' %}
  Lorem ipsum dolor sit amet consectetur adipisicing elit. In, culpa quas
  ratione quidem inventore id.
  {% endAside %}

  {% Aside 'warning' %}
  Lorem ipsum dolor sit amet consectetur adipisicing elit. In, culpa quas
  ratione quidem inventore id.
  {% endAside %}

  {% Aside 'success' %}
  Lorem ipsum dolor sit amet consectetur adipisicing elit. In, culpa quas
  ratione quidem inventore id.
  {% endAside %}

  {% Aside 'gotchas' %}
  Lorem ipsum dolor sit amet consectetur adipisicing elit. In, culpa quas
  ratione quidem inventore id.
  {% endAside %}

  {% Aside 'key-term' %}
  Lorem ipsum dolor sit amet consectetur adipisicing elit. In, culpa quas
  ratione quidem inventore id.
  {% endAside %}

  {% Aside 'codelab' %}
  Lorem ipsum dolor sit amet consectetur adipisicing elit. In, culpa quas
  ratione quidem inventore id.
  {% endAside %}

  <p>This paragraph is nested inside an article. It contains many different, sometimes useful, <a href="https://www.w3schools.com/tags/">HTML5 tags</a>. Of course there are classics like <em>emphasis</em>, <strong>strong</strong>, and <small>small</small> but there are many others as well. Hover the following text for abbreviation tag: <abbr title="abbreviation">abbr</abbr>. Similarly, you can use acronym tag like this: <acronym title="For The Win">ftw</acronym>. You can define <del>deleted text</del> which often gets replaced with <ins>inserted</ins> text.</p>
  <p>You can also use <kbd>keyboard text</kbd>, which sometimes is styled similarly to the <code>&lt;code&gt;</code> or <samp>samp</samp> tags. Even more specifically, there is a tag just for <var>variables</var>. Not to be mistaken with blockquotes
    below, the quote tag lets you denote something as <q>quoted text</q>. Lastly don't forget the sub (H<sub>2</sub>O) and sup (E = MC<sup>2</sup>) tags. </p>

  <h2>In my quaint garden</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolore voluptatem et enim ab itaque assumenda nulla? Praesentium repellendus iure corporis illo, ut facilis voluptas eveniet non necessitatibus reprehenderit quia. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius facilis deserunt tempore, quidem sequi quos rerum. Eos excepturi maiores laudantium veritatis alias amet placeat perspiciatis natus error dolore, nulla consequuntur?</p>
  <figure>
    <img src="https://webdev.imgix.net/images/headers/about.svg" alt="">
    <figcaption>Fig1. A picture stolen from web.dev's about page.</figcaption>
  </figure>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi, culpa quo totam alias maxime expedita porro ut perspiciatis nulla hic, sed obcaecati voluptates sunt dolores, distinctio illo cumque voluptate explicabo!</p>

  <figure class="type--full-bleed">
    <img src="./a.jpg" alt="">
  </figure>

  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi, culpa quo totam alias maxime expedita porro ut perspiciatis nulla hic, sed obcaecati voluptates sunt dolores, distinctio illo cumque voluptate explicabo!</p>


  <h2>In my quaint garden</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, dolor. Consectetur, unde alias! Omnis voluptates pariatur doloremque saepe sapiente unde nesciunt reprehenderit eos itaque sint sed, tenetur dolorum repellat corrupti?</p>
  <blockquote>
    <p>Blockquote: I quickly explained that many big jobs involve few hazards</p>
  </blockquote>
  <blockquote>
    <p>This is a mult-line blockquote with a cite reference. People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick
      carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things.
    </p>
    <cite>Steve Jobs–Apple Worldwide Developers' Conference, 1997</cite>
  </blockquote>

  <table>
    <thead>
      <tr>
        <th>Person</th>
        <th>Number</th>
        <th>Third Column</th>
      </tr>
    </thead>
    <tr>
      <td>Someone Lastname</td>
      <td>900</td>
      <td>Nullam</td>
    </tr>
    <tr>
      <td><a href="#">Person Name</a></td>
      <td>1200</td>
      <td>Vestibulum</td>
    </tr>
    <tr>
      <td>Another Person</td>
      <td>1500</td>
      <td>Vivamus</td>
    </tr>
    <tr>
      <td>Last One</td>
      <td>2800</td>
      <td>Morbi</td>
    </tr>
  </table>

  <table class="with-borders with-heading-tint">
    <thead>
      <tr>
        <th>Person</th>
        <th>Number</th>
        <th>Third Column</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Someone Lastname</td>
        <td>900</td>
        <td>Nullam</td>
      </tr>
      <tr>
        <td><a href="#">Person Name</a></td>
        <td>1200</td>
        <td>Vestibulum</td>
      </tr>
      <tr>
        <td>Another Person</td>
        <td>1500</td>
        <td>Vivamus</td>
      </tr>
      <tr>
        <td>Last One</td>
        <td>2800</td>
        <td>Morbi</td>
      </tr>
    </tbody>
  </table>

  <table>
    <caption>Tables can have captions now.</caption>
    <thead>
      <tr>
        <th>Person</th>
        <th>Number</th>
        <th>Third Column</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Someone Lastname</td>
        <td>900</td>
        <td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      </tr>
      <tr>
        <td><a href="#">Person Name</a></td>
        <td>1200</td>
        <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</td>
      </tr>
      <tr>
        <td>Another Person</td>
        <td>1500</td>
        <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
      </tr>
      <tr>
        <td>Last One</td>
        <td>2800</td>
        <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</td>
      </tr>
    </tbody>
  </table>

  <table class="fixed-table width-full">
    <thead>
      <tr>
        <th>Person</th>
        <th>Number</th>
        <th>Third Column</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Someone Lastname</td>
        <td>900</td>
        <td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      </tr>
      <tr>
        <td><a href="#">Person Name</a></td>
        <td>1200</td>
        <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</td>
      </tr>
      <tr>
        <td>Another Person</td>
        <td>1500</td>
        <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
      </tr>
      <tr>
        <td>Last One</td>
        <td>2800</td>
        <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</td>
      </tr>
    </tbody>
  </table>

  <dl>
    <dt>Definition List Title</dt>
    <dd>Definition list division.</dd>
    <dt>Kitchen Sink</dt>
    <dd>Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.</dd>
    <dt>lorem</dt>
    <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit.</dd>
  </dl>

  <ul>
    <li>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae accusamus ad quibusdam, non qui sequi beatae nulla odio dolor, cum officiis asperiores odit architecto, soluta id facere maiores blanditiis eveniet.</p>
    </li>
    <li>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae accusamus ad quibusdam, non qui sequi beatae nulla odio dolor, cum officiis asperiores odit architecto, soluta id facere maiores blanditiis eveniet.</p>
    </li>
    <li>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae accusamus ad quibusdam, non qui sequi beatae nulla odio dolor, cum officiis asperiores odit architecto, soluta id facere maiores blanditiis eveniet.</p>
    </li>
  </ul>

  <ol>
    <li>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae accusamus ad quibusdam, non qui sequi beatae nulla odio dolor, cum officiis asperiores odit architecto, soluta id facere maiores blanditiis eveniet.</p>
    </li>
    <li>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae accusamus ad quibusdam, non qui sequi beatae nulla odio dolor, cum officiis asperiores odit architecto, soluta id facere maiores blanditiis eveniet.</p>
    </li>
    <li>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae accusamus ad quibusdam, non qui sequi beatae nulla odio dolor, cum officiis asperiores odit architecto, soluta id facere maiores blanditiis eveniet.</p>
    </li>
  </ol>

  <ul>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quo dolores esse asperiores corporis ipsam eaque cupiditate quos deserunt adipisci assumenda provident aspernatur ullam eius, numquam quia sunt a. Adipisci?
      <ul>
        <li>Nested list item
          <ul>
            <li>Level 3, item one</li>
            <li>Level 3, item two</li>
            <li>Level 3, item three</li>
            <li>Level 3, item four</li>
          </ul>
        </li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item four</li>
      </ul>
    </li>
    <li>List item two</li>
    <li>List item three</li>
    <li>List item four</li>
  </ul>
  <ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta quas placeat voluptas nisi repudiandae nemo tenetur assumenda dignissimos cumque autem recusandae quo, sequi deleniti numquam, laudantium minima corrupti ut!
      <ol>
        <li>List item one
          <ol>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
            <li>List item four</li>
          </ol>
        </li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item four</li>
      </ol>
    </li>
    <li>List item two</li>
    <li>List item three</li>
    <li>List item four</li>
  </ol>
  <address>1 Infinite Loop<br>
    Cupertino, CA 95014<br>
    United States</address>
  <pre>
pre {
display: block;
padding: 7px;
background-color: #F5F5F5;
border: 1px solid #E1E1E8;
border-radius: 3px;
white-space: pre-wrap;
word-break: break-all;
font-family: Menlo, Monaco;
line-height: 160%;
}</pre>

  <figure>
    <img src="https://webdev.imgix.net/images/headers/about.svg" alt="">
    <figcaption>Fig1. A picture stolen from web.dev's about page.</figcaption>
  </figure>

  <div class="display-flex justify-content-between">
    <div class="elevation--0" style="width: 6.25rem; height: 6.25rem;"></div>
    <div class="elevation--1" style="width: 6.25rem; height: 6.25rem;"></div>
    <div class="elevation--2" style="width: 6.25rem; height: 6.25rem;"></div>
    <div class="elevation--3" style="width: 6.25rem; height: 6.25rem;"></div>
    <div class="elevation--4" style="width: 6.25rem; height: 6.25rem;"></div>
    <div class="elevation--5" style="width: 6.25rem; height: 6.25rem;"></div>
  </div>

  <form>
    <p>
      <label for="example-input-email">Email address</label>
      <input type="email" id="example-input-email" placeholder="Enter email">
    </p>
    <p>
      <label for="example-input-password1">Number</label>
      <input type="number" id="example-input-number" placeholder="Number">
    </p>
    <p>
      <label for="example-input-password">Password</label>
      <input type="password" id="example-input-password" placeholder="Password">
    </p>
    <p>
      <label for="example-input-search">Search</label>
      <input type="search" id="example-input-serach" placeholder="Search ..">
    </p>
    <p>
      <label for="example-input-tel">Telephone number</label>
      <input type="tel" id="example-input-tel" placeholder="Telephone number">
    </p>

    <p>
      <label for="example-input-text">Text</label>
      <input type="text" id="example-input-text" placeholder="Enter some text here">
    </p>
    <p>
      <label for="example-input-url">Url</label>
      <input type="url" id="example-input-url" placeholder="Enter a url here">
    </p>
    <p>
      <label for="example-input-color">Color</label>
      <input type="color" id="example-inupt-color" placeholder="#fff">
    </p>
    <p>
      <label for="example-input-date">Date</label>
      <input type="date" id="example-input-date" placeholder="date">
    </p>
    <p>
      <label for="example-input-date-time">Date / Time</label>
      <input type="datetime" id="example-input-date-time" placeholder="date / time">
    </p>
    <p>
      <label for="example-input-date-time-local">Date / Time local</label>
      <input type="datetime-local" id="example-input-date-time-local" placeholder="date / time local">
    </p>
    <p>
      <label for="example-input-month">Month</label>
      <input type="month" id="example-input-month" placeholder="Month">
    </p>
    <p>
      <label for="example-input-week">Week</label>
      <input type="week" id="example-input-week" placeholder="Week">
    </p>
    <p>
      <label for="example-input-time">Time</label>
      <input type="time" id="example-input-time" placeholder="Time">
    </p>
    <p>
      <label for="example-select1">Example select</label>
      <select id="example-select1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </p>
    <p>
      <label for="example-select2">Example multiple select</label>
      <select multiple id="example-select2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </p>
    <p>
      <label for="example-textarea">Example textarea</label>
      <textarea id="example-textarea" rows="3"></textarea>
    </p>
    <p>
      <label for="example-input-file">File input</label>
      <input type="file" id="example-input-file">
    </p>
    <fieldset>
      <legend>I am legend</legend>
      <div>
        <label>
          <input type="radio" name="options-radios" id="optionsR-radios1" value="option1" checked> Option one is this and that&mdash;be sure to include why it's great
        </label>
      </div>

      <div>
        <label>
          <input type="radio" name="options-radios" id="options-radios2" value="option2"> Option two can be something else and selecting it will deselect option one
        </label>
      </div>
      <div>
        <label>
          <input type="radio" name="optionsRadios" id="options-radios3" value="option3" disabled> Option three is disabled
        </label>
      </div>
    </fieldset>

    <fieldset>
      <legend>I am also legend</legend>
      <input type="checkbox"> Check me out
      <input type="checkbox"> Or check me out
    </fieldset>
    <p>
      <button type="button" name="button">Button</button>
      <input type="button" name="input" value="Input Button">
      <input type="submit" name="submit" value="Submit Button">
      <input type="reset" name="reset" value="Reset Button">
    </p>
  </form>
  <div>
    {% Img src='image/foR0vJZKULb5AGJExlazy1xYDgI2/1600132969326.jpg', alt='Smiling Dog', height='450', width='800' %}
    {% Video src='video/tcFciHGuF3MxnTr1y5ue01OGLBn2/1601081394086.mp4' %}
  </div>

  <div>
    {% Img src='image/BrQidfK9jaQyIHwdw91aVpkPiib2/TDNgfhI9byR4eeGQ0Xxv.png', alt='Screenshot', height="302", width="770", class="screenshot" %}
    {% Img src='image/BrQidfK9jaQyIHwdw91aVpkPiib2/TDNgfhI9byR4eeGQ0Xxv.png', alt='Screenshot', height="302", width="770", class="screenshot screenshot--filled" %}
  </div>

</article>
{% endblock %}